<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>商家</title>
    <link rel="stylesheet" href="./stylesheets/reset.css">
    <link rel="stylesheet" href="./stylesheets/bootstrap.min.css">
    <link href="http:////at.alicdn.com/t/font_1512981_qy3wz899e7.css" rel="stylesheet">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        .current-position {
            width: 100%;
            height: 54px;
            background: #f4f4f4;
            margin-bottom: 20px;
        }

        .current-position ul {
            width: 100%;
        }

        .current-position ul li {
            float: left;
            font-size: 13px;
            color: #666666;
            line-height: 54px;
            margin-right: 10px;
        }

        .current-position ul li:first-child {
            margin-left: 20px;
        }

        /*礼拜五旗舰店*/
        .main {
            width: 100%;
            height: 418px;
            margin-bottom: 20px;
        }

        /*左侧*/
        .mainLeft {
            width: 32%;
            height: 100%;
            float: left;
        }

        .tu {
            width: 100%;
            height: 77.3%;
        }

        .tu img {
            width: 100%;
            display: block;
            height: 100%;
        }

        .smallTu {
            width: 100%;
            height: 15%;
            margin-top: 30px;
        }

        .pav,
        .next {
            width: 10%;
            height: 100%;
            float: left;
            background: url('./images/lxc/zuo.png') 5px center no-repeat;
            background-size: 50%;
        }

        .pav:hover {
            background: rgba(0, 0, 0, 0.4) url('./images/lxc/zuo.png') 5px center no-repeat;
            background-size: 50%;
        }

        .lunbo {
            width: 80%;
            height: 100%;
            float: left;
        }

        .lunbo ul {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
        }

        .lunbo li {
            width: 23%;
            height: 100%;

        }

        .lunbo li img {
            width: 100%;
            height: 100%;
        }

        .active2 {
            border: 1px solid #f08507;
        }

        .next {
            background: url("./images/lxc/you.png") 5px center no-repeat;
            background-size: 50%;
        }

        .next:hover {
            background: rgba(0, 0, 0, 0.4) url("./images/lxc/you.png") 5px center no-repeat;
            background-size: 50%;
        }

        /*中间*/
        .mainMiddle {
            width: 32%;
            height: 100%;
            float: left;
            margin-left: 3%;
        }

        .mainMiddle-head {
            height: 70px;
            border-bottom: 1px solid #e4e4e4;
        }

        .mainMiddle-head p {
            font-size: 23px;
            line-height: 70px;
        }

        .businessHours {
            height: 154px;
            border-bottom: 1px solid #e4e4e4;
        }

        .businessHours p {
            margin-top: 20px;
            font-size: 14px;
        }

        .businessHours p:nth-child(1) {
            background: url("./images/lxc/yysj.png") left center no-repeat;
            background-size: 6%;
            padding-left: 20px;
            margin-top: 40px;
        }

        .businessHours p:nth-child(2) {
            background: url("./images/lxc/iphon.png") left center no-repeat;
            background-size: 5%;
            padding-left: 20px;
        }

        .businessHours p:nth-child(3) {
            background: url("./images/lxc/location.png") left center no-repeat;
            background-size: 6%;
            padding-left: 20px;
        }

        .businessHours p span {
            color: #f08200;
        }

        .sjgg {
            height: 147px;
        }

        .sjgg p:nth-child(1) {
            font-size: 20px;
            margin-top: 30px;
        }

        .sjgg p:nth-child(2) {
            color: #747474;
            margin-top: 10px;
        }

        /*右侧*/
        .mainRight {
            width: 30%;
            height: 80%;
            background: #f4fff2;
            float: left;
            margin-left: 3%;
            position: relative;
        }

        .pf {
            margin-top: 120px;
            margin-left: 20px;
        }

        .pf p {
            float: left;
        }

        .pf p:nth-child(2) {
            width: 35%;
            height: 4px;
            background: #d3d3d3;
            margin-top: 10px;
        }

        .pf p:nth-child(2) span {
            width: 80%;
            height: 100%;
            background: #f08200;
            display: block;
        }

        .pf em {
            color: #f08200;
            margin-left: 10px;
        }

        .zysj {
            position: absolute;
            top: 0px;
            right: 0px;
            width: 49px;
            height: 61px;
            background: url("./images/lxc/zysj.png") center center no-repeat;
        }

        .describe {
            width: 90%;
            height: 52px;
            margin-top: 30px;
            margin-left: 5%;
        }

        .describe li {
            float: left;
            width: 32%;
            text-align: center;
            border-right: 1px dashed #d3d3d3;
        }

        .describe li:nth-child(3) {
            border: none;
        }

        .describe li em {
            color: #f08200;
        }

        .fl {
            width: 100%;
            height: 56px;
            margin-top: 20px;
            margin-bottom: 20px;
            border-top: 1px solid #e4e4e4;
            border-bottom: 1px solid #e4e4e4;
        }

        .fl p {
            width: 6%;
            color: #bcbcbc;
            height: 100%;
            line-height: 56px;
            float: left;
        }

        .fl ul {
            float: left;
            height: 100%;
            width: 94%;
        }

        .fl ul li {
            float: left;
            line-height: 56px;
            margin-right: 20px;
            text-align: center;
        }

        .fl ul li:hover {
            background: #4b943d;
            color: white;
        }

        /*分页器*/
        #page {
            margin: 20px auto;
            color: #666;
            display: block;
            text-align: center;
        }

        #page li {
            display: inline-block;
            min-width: 30px;
            height: 28px;
            cursor: pointer;
            color: #666;
            font-size: 13px;
            line-height: 28px;
            background-color: #f9f9f9;
            border: 1px solid #dce0e0;
            text-align: center;
            margin: 0 4px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }

        .xl-nextPage,
        .xl-prevPage {
            width: 60px;
            color: #0073A9;
            height: 28px;
        }

        #page li.xl-disabled {
            opacity: .5;
            cursor: no-drop;
        }

        #page li.xl-disabled:hover {
            background-color: #f9f9f9 !important;
            border: 1px solid #dce0e0 !important;
            color: #666 !important;
        }

        #page li.xl-active {
            background-color: #498e3d;
            border-color: #498e3d;
            color: #FFF
        }

        #page li:hover {
            background-color: #498e3d !important;
            border-color: #498e3d;
            color: #FFF
        }

        #page li.xl-jumpText {
            background-color: rgba(0, 0, 0, 0);
            border-color: rgba(0, 0, 0, 0);
            opacity: 1;
        }

        #page li.xl-jumpText:hover {
            background-color: rgba(0, 0, 0, 0) !important;
            border-color: rgba(0, 0, 0, 0) !important;
        }

        #page li.xl-jumpButton {
            padding: 0 5px;
        }

        #xlJumpNum {
            width: 35px;
            margin: 0 3px;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
        }

        input[type="number"] {
            -moz-appearance: textfield;
        }

        .box123 {
            width: 70%;
            margin-left: 16.666%;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <div id="lxcbox">
        <div id="lxcheader"></div>
        <div id="lxcsearch"></div>
    </div>
    <div class="box123">
        <!--当前位置-->
        <div class="current-position">
            <ul>
                <li>您的当前位置：</li>
                <li>首页</li>
                <li>></li>
                <li>全部商品</li>
                <li>></li>
                <li>苹果</li>
                <li>></li>
                <li>阿克苏</li>
            </ul>
        </div>
        <!--    礼拜五旗舰店-->
        <div class="main">
            <!--        左侧-->
            <div class="mainLeft">
                <div class="tu">
                    <img src="./images/lxc/juzi.png" alt="">
                </div>
                <div class="smallTu">
                    <div class="pav"></div>
                    <div class="lunbo">
                        <ul id="lbBox">
                            <li class="active2">
                                <img src="./images/lxc/xiaojuzi.png" alt="">
                            </li>
                            <li>
                                <img src="./images/lxc/nm.png" alt="">
                            </li>
                            <li>
                                <img src="./images/lxc/pt.png" alt="">
                            </li>
                            <li>
                                <img src="./images/lxc/qyg.png" alt="">
                            </li>
                        </ul>
                    </div>
                    <div class="next"></div>
                </div>
            </div>
            <!--        中间-->
            <div class="mainMiddle">
                <div class="mainMiddle-head">
                    <p>礼拜五旗舰店</p>
                </div>
                <!--            营业时间-->
                <div class="businessHours">
                    <p>营业时间：全天24小时 <span>￥62/人</span></p>
                    <p>18674328512</p>
                    <p>浙江省温岭市人民路281左侧</p>
                </div>
                <!--            商家公告-->
                <div class="sjgg">
                    <p>商家公告：</p>
                    <p>本店有最新优惠活动，本店有最新优惠活动，本店有最新优惠活动，本店有最新优惠活动，本店有最新优惠活动，</p>
                </div>
            </div>
            <!--        右侧-->
            <div class="mainRight">
                <div class="pf">
                    <p>综合评分：</p>
                    <p><span></span></p>
                    <em>4.5分</em>
                </div>
                <div class="zysj"></div>
                <ul class="describe">
                    <li>描述 <br><em>4.5分</em></li>
                    <li>商品 <br><em>4.5分</em></li>
                    <li>服务 <br><em>4.5分</em></li>
                </ul>

            </div>
        </div>
        <!--    分类-->
        <div class="fl">
            <p>分类：</p>
            <ul>
                <li>全部</li>
                <li>餐饮</li>
                <li>酒店</li>
                <li>休闲</li>
                <li>电影</li>
                <li>汽车装饰</li>
                <li>家政服务</li>
            </ul>
        </div>
        <!--    商品-->


        <!--    分页器-->
        <div id="page"></div>
    </div>
    <!-- 尾部 -->
    <div id="lxcfooter">
        <div id="lxcfooter1"></div>
        <div id="lxcfooter2"></div>
        <div id="lxcbottom"></div>
    </div>
    <div id="myModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
            </div>
        </div>
    </div>
</body>

</html>
<script src="./javascripts/jquery-3.4.1.min.js"></script>
<script src="./javascripts/lxcheader.js"></script>
<script type="text/javascript" src="./javascripts/lxcPaging.js"></script>
<script src="./javascripts/bootstrap.min.js"></script>
<script>
    // 分页器 xlPaging.js 使用方法
    $("#page").paging({
        nowPage: 1, // 当前页码
        pageNum: 10, // 总页码
        buttonNum: 6, //要展示的页码数量
        canJump: 1, // 是否能跳转。0=不显示（默认），1=显示
        showOne: 0, //只有一页时，是否显示。0=不显示,1=显示（默认）
        callback: function (num) { //回调函数
            console.log(num);
        }
    });
</script>